fix(react): honor prefers-reduced-motion in the shared stylesheet - #1892
fix(react): honor prefers-reduced-motion in the shared stylesheet#1892ra-co88 wants to merge 4 commits into
Conversation
|
Heads-up on the red |
ra-co88
left a comment
ra-co88
left a comment
There was a problem hiding this comment.
Verdict: approve — prefers-reduced-motion support, the standard pattern applied correctly. (Comment review: GitHub blocks formal self-approval on your own PR.)
Supersession check (upstream/main @ 2dc399e): globals.css upstream has zero prefers-reduced-motion handling. Not superseded.
The implementation is the canonical modern-CSS-reset block: universal selector with animation-duration/transition-duration collapsed to 0.01ms, animation-iteration-count: 1, scroll-behavior: auto. The comment block documents the two judgment calls:
- The spinner is capped to a single 0.01ms iteration — effectively static — with its meaning preserved via
role="status"for assistive tech rather than forcing an opacity pulse. - WCAG 2.2 reference stated in-file for the audit trail.
One honest note: the e2e hook for this was offered but not included ("happy to add the one-liner"). CSS-only, zero API surface, all 36 CI checks green. Given the repo norm of e2e coverage for user-visible changes, adding the toggle-and-assert e2e would be nice-to-have before merge, but the change is low-risk enough that it is not blocking.
Good to merge.
3 participants
What
The shared stylesheet now honors
prefers-reduced-motion: reduce: transition and animation durations collapse to 0.01ms and smooth scrolling is disabled, per the standard accessibility pattern.Why
Users who set the OS-level reduced-motion preference were still getting full transitions and smooth scroll — the stylesheet never consulted the media query.
What changed
One media block in
packages/react/src/styles/globals.css. No API surface change.Test plan
CSS-only change; verified by toggling the OS preference and observing the shared UI (e2e hook available if maintainers want it recorded — happy to add the one-liner).